<template>
	<view class="dizhi">
		<view class="list">
			<view class="item" v-for="(item,index) in addressList" :key="index" v-if="addressList.length>0">
				<view class="item1">
					<text class="name">
						{{item.name}}
					</text>
					<text class="phone">
						{{item.phone}}
					</text>
					<text class="tabs" v-if="item.show">默认</text>
				</view>
				<view class="item2">
					{{item.address}}{{item.dizhi}}
				</view>
				<view class="item3">
					<label class="radio">
						<view class="radio_item1" v-if="item.show">
							<image src="@/static/mine/mipmap-xxxhdpi/选中.png" mode=""></image>
						</view>
						<view class="radio_item2" @click="clickDefault(index)" v-else>
							<!-- <image src="@/static/mine/mipmap-xxxhdpi/选中.png" mode=""></image> -->
						</view>
						<text>设为默认</text>
					</label>
					<view class="item3-right">
						<view class="right1" @click="clickDelete(index)">
							<image class="img" src="@/static/mine/mipmap-xxxhdpi/删.png" mode="widthFix"></image>
							<view>删除</view>
						</view>
						<view class="right1" @click="edit(index)">
							<image class="img" src="@/static/mine/mipmap-xxxhdpi/改.png" mode="widthFix"></image>
							<view>编辑</view>
						</view>
					</view>
				</view>
			</view>
			<view class="" style="font-size: 26rpx;width: 100%;text-align: center;" v-if="addressList==0">
				请添加收获地址
			</view>
			<view class="btn" @click="toAdd()">
				添加收货地址
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList: [],
				address: {
					id: '',
					name: '',
					mobile: '',
					address: '',
					show: false,
				}
			};
		},
		onShow() {
			let addresses = uni.getStorageSync('addresses') || [];
			this.addressList = addresses
		},
		methods: {
			/* 默认地址选中事件 */
			clickDefault(index) {

			},
			/* 添加地址 */
			toAdd() {
				uni.navigateTo({
					url: "/user/addDizhi"
				})
			},
			/* 删除地址 */
			clickDelete(index) {
				const a = this.addressList.splice(index, 1);
				this.addressList = a
				console.log(this.addressList)
				uni.setStorageSync('addresses', this.addressList);
				let addresses = uni.getStorageSync('addresses') || [];
				this.addressList = addresses
				uni.showToast({
					title: '删除地址成功',
					icon: 'success',
					duration: 2000
				});
			},
			edit(index) {
				uni.setStorageSync('index', index)
				uni.navigateTo({
					url: '/user/editDizhi'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.dizhi {
		width: 100%;
		min-height: 100vh;
		overflow: hidden;
		background-color: #f7f7f7;

		.list {
			width: 94%;
			padding: 20rpx 0rpx;
			margin: 0 auto;
			overflow: hidden;

			.item {
				min-height: 200rpx;
				margin-top: 20rpx;
				padding: 20rpx 30rpx;
				background: #FFFFFF;
				border-radius: 20rpx;

				.item1 {
					padding: 10rpx;

					.name {
						font-weight: bold;
						font-size: 32rpx;
						color: #333333;
						margin-right: 10rpx;
					}

					.phone {
						font-weight: 500;
						font-size: 28rpx;
						color: #999999;
						margin-right: 10rpx;
					}

					.tabs {
						background: #DF4647;
						border-radius: 5rpx;
						color: #fff;
						text-align: center;
						font-weight: 500;
						font-size: 24rpx;
						padding: 5rpx 10rpx;
					}
				}

				.item2 {
					padding: 10rpx;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
					min-height: 67rpx;
				}

				.item3 {
					padding: 20rpx 10rpx 10rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-top: 1px solid #E5E5E5;

					.img {
						width: 32rpx;
						margin-right: 5rpx;
					}

					.radio {
						font-weight: 500;
						font-size: 26rpx;
						color: #999999;
						display: flex;
						align-items: center;

						.radio_item1 {
							background: #DF4647;
							width: 38rpx;
							text-align: center;
							height: 38rpx;
							border: 1px solid #E5E5E5;
							border-radius: 50%;
							margin-right: 10rpx;
							background-image: url("@/static/mine/mipmap-xxxhdpi/选中.png");
							background-size: 50% 50%;
							background-position: center center;
							background-repeat: no-repeat;
						}

						.radio_item2 {
							width: 38rpx;
							height: 38rpx;
							border: 1px solid #E5E5E5;
							border-radius: 50%;
							margin-right: 10rpx;
						}
					}

					.item3-right {
						display: flex;
						align-items: center;
						// justify-content: space-between;/
						font-weight: 500;
						font-size: 24rpx;
						color: #666666;

						.right1 {
							margin-right: 10rpx;
							font-weight: 500;
							font-size: 24rpx;
							color: #666666;
							display: flex;
						}
					}
				}
			}
		}

		.btn {
			width: 94%;
			margin: 0 auto;
			padding: 20rpx 0;
			text-align: center;
			color: #fff;
			background-color: #DF4647;
			border-radius: 50rpx;
			position: fixed;
			bottom: 80rpx;
			font-weight: 500;
			font-size: 30rpx;
		}
	}
</style>